<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%
        }
        table {
            width: 500px;
            height: 500px;
            border-spacing: 0;
            border: 1px solid #000;
            border-collapse: collapse; 
            /* empty-cells: hide */
            /* table-layout: fixed */
        }
        tr{
            height: 100px;
        }
        td {
            border: 1px solid #000;
        }

        caption {
            caption-side: left
                /* 
                top:ie 谷歌 火狐
                right: 火狐
                bottom:ie 谷歌 火狐
                left:火狐
            */
        }

        thead {
            background: red;
            height: 100px;
        }

        tbody {
            background: green;
            height: 300px;
        }

        tfoot {
            background: blue;
            height: 100px;
        }
    </style>
</head>

<body>

    <table>
        <!-- 
            span:number 几列
            width:只有宽度有效果
            官方推荐使用双标签~
         -->
        <!-- <col span="2" width="100px"> -->
        <!-- <colgroup span="2" width="100px"></colgroup> -->
        <caption>表格的名称需要在table内</caption>
        <thead>
            <tr>
                <!-- 默认样式进行加粗 居中 -->
                <th>序号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
       
        <tfoot>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>
<!-- 
    高级表格的应用
        1.单元格之间的间距
            属性:border-spacing
            属性值:value
                - 当单元格之间的间距设置成0的时候，两个相邻单元格之间边框会变粗
                - 属性值不能为负数

        2.合并相邻单元格边框
            属性:border-collapse
            属性值:
                - collapse 合并
                - separate 分开不合并

        3.无内容时单元格的设置
            属性:empty-cells
            属性值:
                - hide 隐藏
                - show 显示

        4.表格中的计算属性
            属性:table-layout
            属性值:
                - auto 自动 默认值
                - fixed 固定
            解释:从表格的第一行第一列开始进行审查 - 不要用表格布局

        5.数据的行分组
            - thead 头部 唯一
            - tbody 主体 默认会生成一个tbody,还可以添加使用多次
            - tfoot 底部 唯一

        6.数据列分组
            - col
            - colgroup
 -->